<template>
  <div>
    <div class="QRCodecomtent" style="background: #ffffff; height: 418px">
      <div class="ewmboxt" style="color: #000000">
        <div
          class="ewmbox"
          style="font-size: 20px; font-weight: bold; color: #000000"
        >
          ID:{{ gtel }}
        </div>
        <div v-for="(item, index) in ewms[0]" :key="index" class="ewmbox">
          <!--                    num1-->
          <div class="qrbox">
            <vue-qr
              :correct-level="0"
              :logo-corner-radius="0"
              :logo-src="item.src"
              :margin="0"
              :size="150"
              :text="item.text"
            />
          </div>
          <span class="tdbox gtel4id">ID:{{ gtel4 }}</span>
        </div>
      </div>
      <div class="ewmboxt">
        <div class="ewmbox gtelid">ID:{{ gtel }}</div>
        <div v-for="(item, index) in ewms[1]" :key="index" class="ewmbox">
          <!--                    num1-->
          <div class="qrbox">
            <vue-qr
              :correct-level="0"
              :logo-corner-radius="0"
              :logo-src="item.src"
              :margin="0"
              :size="150"
              :text="item.text"
            />
          </div>
          <span class="tdbox gtel4id">ID:{{ gtel4 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import vueQr from 'vue-qr/src/packages/vue-qr.vue'
  import num1 from '@/assets/img/1.png'
  import num2 from '@/assets/img/2.jpg'
  import num3 from '@/assets/img/3.jpg'
  import num4 from '@/assets/img/4.jpg'
  import num5 from '@/assets/img/5.jpg'
  import num6 from '@/assets/img/6.jpg'
  import num7 from '@/assets/img/7.jpg'
  import num8 from '@/assets/img/8.jpg'
  import num9 from '@/assets/img/9.jpg'
  import num10 from '@/assets/img/10.jpg'
  import num11 from '@/assets/img/11.jpg'
  import num12 from '@/assets/img/12.jpg'
  import num13 from '@/assets/img/13.jpg'
  import num14 from '@/assets/img/14.jpg'
  import num15 from '@/assets/img/15.jpg'
  import num16 from '@/assets/img/16.jpg'
  import num17 from '@/assets/img/17.jpg'
  import num18 from '@/assets/img/18.jpg'
  import num19 from '@/assets/img/19.jpg'
  import num20 from '@/assets/img/20.jpg'

  export default {
    name: 'QRCode',

    components: {
      vueQr,
    },
    props: {
      gtel: { default: '' },
      gls: { default: 10 },
      glsi: { default: 0 },
    },
    data() {
      return {
        num1: num1,
        num2: num2,
        num3: num3,
        num4: num4,
        num5: num5,
        num6: num6,
        num7: num7,
        num8: num8,
        num9: num9,
        num10: num10,
        num11: num11,
        num12: num12,
        num13: num13,
        num14: num14,
        num15: num15,
        num16: num16,
        num17: num17,
        num18: num18,
        num19: num19,
        num20: num20,
      }
    },
    computed: {
      gtel4() {
        return this.gtel.slice(-4, this.gtel.length)
      },
      ewms() {
        let r = [[], []]
        let glsone = Math.ceil(this.gls / 2)
        glsone = glsone - Math.ceil(this.glsi / 2)
        if (glsone > 5) {
          glsone = 5
        }
        for (let i = 1; i <= glsone; i++) {
          let zi = i + this.glsi
          r[0].push({
            src: this['num' + zi],
            text:
              'https://ssl.gpsserver.cn/CheWeb?gtel=' + this.gtel + '_' + zi,
          })
          let j = glsone + zi
          if (j <= this.gls) {
            r[1].push({
              src: this['num' + j],
              text:
                'https://ssl.gpsserver.cn/CheWeb?gtel=' + this.gtel + '_' + j,
            })
          }
        }

        return r
      },
    },
    watch: {},
    mounted() {},
    updated() {},

    methods: {},
  }
</script>
<style lang="scss" scoped>
  .QRCodecomtent {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .ewmboxt {
    height: 202px;
    display: flex;
  }

  .ewmbox {
    width: 202px;
    height: 202px;
    margin: 0 7px;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 10px;
  }

  .tdbox {
    line-height: 20px;
  }

  .qrbox {
    /*flex: 1;*/
    height: 150px;
    width: 150px;
  }

  .ewmboxt .ewmbox:nth-child(1) {
    margin-left: 0;
  }

  .ewmboxt .ewmbox:nth-last-child(1) {
    margin-right: 0;
  }

  .gtelid {
    font-size: 20px;
    font-weight: bold;
  }

  .gtel4id {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
  }
</style>
